<template>
	<div class="page-main-content">
		<div class="shop-header">
			<div class="shop-header-content flex-row-relative">
				<div class="avatar-content hw44">
					<div class="avatar">
						<img :src="avatar" alt="" v-show="data.avatar">
					</div>
				</div>
				<div class="name-content flex-row-relative">
					<p v-text="data.mobile"></p>
				</div>
				<div class="enter flex-row-relative">
					<span @click="getKf">
						<img src="/img/kefu.png" alt="" srcset="" />
					</span>
				</div>
			</div>
		</div>
		<div class="account">
			<div class="pos">
				<div class="balance">
					<div class="amount">
						<span v-if="showMoney" v-text="data.money"></span>
						<span v-else>****</span>
						<span class="iconfont" :class="{ 'icon-show': showMoney, 'icon-hide': !showMoney }"
							@click="toggleVisibility"></span>
					</div>
					<div class="label1">{{ $t('Số dư di động') }}</div>
				</div>
				<div class="opertion">
					<div class="item withdraw" @click="addToShop">
						{{ $t('Thoát ngay') }}
					</div>
				</div>
			</div>
		</div>
		<ul class="mui-table-view">
			<li class="mui-table-view-cell">
				<router-link class="mui-navigate-right" to="/user/personal">
					<img src="/img/icon1.png" class="mui-pull-left" />
					<span class="text">{{ $t('Thông tin cá nhân') }}</span>
				</router-link>
			</li>
			<li class="mui-table-view-cell">
				<router-link class="mui-navigate-right" to="/user/work">
					<img src="/img/icon2.png" class="mui-pull-left" />
					<span class="text">{{ $t('Trí tuệ con người') }}</span>
				</router-link>
			</li>
			<li class="mui-table-view-cell">
				<router-link class="mui-navigate-right" to="/user/bank">
					<img src="/img/icon3.png" class="mui-pull-left" />
					<span class="text">{{ $t('Thông tin ngân hàng') }}</span>
				</router-link>
			</li>
			<li class="mui-table-view-cell">
				<router-link class="mui-navigate-right" to="/user/drawing">
					<img src="/img/icon5.png" class="mui-pull-left" />
					<span class="text">{{ $t('CV tài chính') }}</span>
				</router-link>
			</li>
			<li class="mui-table-view-cell">
				<span class="mui-navigate-right" @click="getKf">
					<img src="/img/icon4.png" class="mui-pull-left" />
					<span class="text">{{ $t('Hỗ trợ trực tuyến') }}</span>
				</span>
			</li>
		</ul>
		<div class="topup logout" @click="logout">{{ $t('Hủy bỏ') }}</div>
		<div class="loading-overlay" v-show="withdraw_dialog" @click="addToShop">
			<div class="dialog-box" @click.stop style="min-width: 90vw;">
				<div class="title">{{ $t('Ngăn kéo, ngăn kéo') }}</div>
				<div class="ditem">
					<div class="title">{{ $t('Số tiền rút') }}</div>
					<div class="pd">
						<input type="text" class="input" :placeholder="$t('Vui lòng nhập số tiền rút')"
							oninput="value=value.replace(/[^\d.]/g,'').replace(/(\d{0,}\.\d{0,2}).*/,'$1');"
							v-model="post.money" />
						<span class="right50">{{initData.currency}}</span>
					</div>
				</div>
				<div class="ditem">
					<div class="title">{{ $t('Sử dụng mật khẩu và liên hệ với bộ phận hỗ trợ') }}.</div>
					<div class="pd">
						<input type="password" class="input" :placeholder="$t('Làm việc với mã')" maxlength="6"
							v-model="post.pay_password" />
					</div>
				</div>
				<div class="topup" @click="sub">{{ $t('Ngăn kéo, ngăn kéo') }}</div>
			</div>
		</div>
	</div>
</template>

<script>
import AJAX from '@/utils/http';
import avatarImg from '@/assets/avatar.png'
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			withdraw_dialog: false,
			showMoney: true, // 控制金额显示和隐藏的状态
			data: {},
			avatar: avatarImg,
			post: {
				money: '',
				pay_password: '',
			},
			initData:{},
		};
	},
	created() {
		this.fetchData();
		this.init();
	},
	methods: {
		...mapActions(['getKf']),
		fetchData() {
			AJAX.post('/user/index', {}).then(e => {
				this.data = e.data;
			});
		},
		logout() {
			AJAX.post('/user/logout', {}).then(e => {
				this.$toast(e.msg);
				if (e.code) {
					localStorage.removeItem('token');
					this.$router.push('/');
				}
			});
		},
		sub() {
			AJAX.post('/user/withdraw', this.post).then(e => {
				this.$toast(e.msg);
				setTimeout(() => {
					this.getKf();
				}, 1000 * 1.5);
				if (e.code) {
					this.$router.push('/');
				}
			});
		},
		toggleVisibility() {
			this.showMoney = !this.showMoney; // 点击图标时切换金额显示和隐藏的状态
		},
		addToShop() {
			this.withdraw_dialog = !this.withdraw_dialog;
		},
		init(){
			AJAX.post('/index/init', {}, {
				showLoading: false
			}).then(e => {
				this.initData = e.data;	
			});
		},
	}
};
</script>

<style scoped>
.logout {
	margin: 12px;
	background: #fff;
	border-radius: 8px;
	color: #000;
}

.account {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	margin: 12px;
	border: 1px solid #ebebeb;
	margin-top: -48px;
}


.account .pos {
	padding: 8px 15px;
	position: relative;
	display: flex;
}


.account .pos .balance {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	color: #323233;
	padding: 10px;
	flex: 1;
}

.account .pos .balance .label1 {
	font-weight: 400;
	font-weight: 400;
	font-size: 11px;
	padding-top: 5px;

}

.account .pos .balance .amount {
	font-size: 18px;
	font-weight: 700;
	margin-top: 5px;
	line-height: 1.5;
}

.account .pos .opertion {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 8px;
}

.account .pos .opertion .item:hover,
.account .pos .opertion .item:focus,
.account .pos .opertion .item:active {
	opacity: .5;
}


.account .pos .opertion .item {
	height: 32px;
	border-radius: 4px;
	text-align: center;
	line-height: 32px;
	font-size: 11px;
	color: #fff;
	background: var(--system-color);
	padding: 0 8px;
	min-width: 68px;
	width: 100%;
	margin: 0 12px;
}

.account .pos .balance .iconfont {
	font-size: 21px;
	margin-left: 4px;
	color: #ccc;
	font-weight: 300;
}

.account p {
	color: #333;
	font-size: 14px;
	margin-top: 12px;
}
</style>